Electron |
您所在的位置：网站首页 › electron 重启 › Electron |
Electron
|
本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。 Electron如何加载vue页面的呢 第一步 createWindow()，创建窗口在src/main/index.js中的createWindow()函数中，Electron-vue已经为我们写好了创建窗口的实例。在这里调用到了BrowserWindow，具体的参数设置以及使用参考官方文档。这里我们先引入BrowserWindow： import { BrowserWindow } from 'electron' 复制代码然后看一下我们需要的参数，目前我们只需要设置窗口的宽高 // 定义一个mainWindow作为主窗口 mainWindow = new BrowserWindow({ height: 310,//窗口的高度 width: 330,//窗口的宽度 }) 复制代码到这里，目前我们就可以创建一个页面了，那么Electron要如何来显示我们vue写好的页面，其实Electron-vue已经为我们做好了。 第二步 引入页面 // 定义了一个winUrl,存储要加载的页面 const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html` 复制代码 在Electron-vue中index.html对应的是index.ejs ！！！ 第三步 加载页面 // 用主窗口去加载页面 mainWindow.loadURL(winURL) 复制代码到此为止，我们已经了解了Electron是如何加载页面的 下面的内容，需要了解vue！！！下面我们开始制作登录页面， 第一步 创建文件以及文件夹在renderer中创建一个名为layout的文件夹，并在此文件夹中创建login.vue文件. 第二步 使用element-ui实现如下页面
确定form中的数据有：userName，password，autoStart，直接使用vue进行的v-model进行绑定。 分析： 我们需要定义的字段 data() { return { user: [], autoStartLocal:false, // 记录本地存储的自启动，如果本地已经将自启动写入注册表，这个数据和表单里的autoStart进行比较，防止多次写入。 ruleForm: { password: "", // 表单密码 userName: "",//表单 autoStart: false }, rules: { password: [{ required: true, message: "请输入密码", trigger: "blur" }], userName: [{ required: true, message: "请输入用户名", trigger: "blur" }] } }; }, 复制代码 什么时候读取本地存储的用户名，密码以及自启动 用户输入完用户名和密码，需要和本地所存储的用户名密码进行比较，所以我们需要将数据取出来，但是你会发现，自启动，我们有可能之前设置过了，所以自启动要在页面加载之后就开始读取，使用monted在DOM加载完成之后就进行读取。 submitForm(formName) { console.log("提交"); this.$refs[formName].validate(valid => { if (valid) { if ( this.ruleForm.userName !== this.user.userName || this.user.password !== this.ruleForm.password ) { this.$message({ message: "用户名或者密码错误", type: "error", center: true, duration: 1000 }); } else { let result = this.$db .get("user") .find({ userName: this.ruleForm.userName }) .assign({ autoStart: this.ruleForm.autoStart }) .write(); if (result) { this.$store.commit("changeLoginState", true); console.log(this.$store.state.login.loginState); this.$router.replace("/"); console.log(this.$router); } } } else { return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; 复制代码 |
【本文地址】